<template>
  <a-modal v-model="visiable" @ok="handOk" @cancel="handCancel" :width="800">
    <div style="margin-top: 20px;">
      <a-tabs :activeKey="current" @change="tabChange">
        <a-tab-pane :key="index" :tab="item.companyName" v-for="(item, index) in tabList"></a-tab-pane>
      </a-tabs>
    </div>
    <a-table style="margin-top:20px" ref="table" size="middle" :scroll="{ x: true }" :bordered="false" rowKey="id"
      :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading"
      class="j-table-force-nowrap" @change="handleTableChange">
      <template slot="htmlSlot" slot-scope="text">
        <div v-html="text"></div>
      </template>
      <template slot="imgSlot" slot-scope="text, record">
        <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
        <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt=""
          style="max-width: 80px; font-size: 12px; font-style: italic" />
      </template>
    </a-table>
  </a-modal>
</template>

<script>
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction, postAction } from '@/api/manage'
export default {
  mixins: [JeecgListMixin, mixinDevice],
  data() {
    return {
      visiable: false,
      columns: [
        {
          title: '操作时间',
          align: 'center',
          dataIndex: 'updateTime',
        },
        {
          title: '日期',
          align: 'center',
          dataIndex: 'settlementDate',
          customRender: function (text, record) {
            return record.type != '变动' ? record.settlementDate : record.updateTime
          },
        },
        {
          title: '结算明细',
          align: 'center',
          dataIndex: 'settlementAmount',
          customRender: function (text) {
            return text ? text + '元' : 0
          },
        },
        {
          title: '类型',
          align: 'center',
          dataIndex: 'type'
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'changeRemarks'
        },
        {
          title: '图片',
          align: 'center',
          dataIndex: 'picture',
          scopedSlots: { customRender: 'imgSlot' },
        }
      ],
      url: {
        list: '/hc/hcMerchantSettlement/queryRecordListById',
        delete: '/hc/hcMerchantSettlement/delete',
        deleteBatch: '/hc/hcMerchantSettlement/deleteBatch',
        exportXlsUrl: '/hc/hcMerchantSettlement/exportXls',
        importExcelUrl: 'hc/hcMerchantSettlement/importExcel',
      },

      tabList: [{ companyName: '用户账户' }],
      current: 0
    }
  },
  mounted() {
  },
  methods: {
    show(records) {
      console.log('5555')
      this.visiable = true;
      this.queryParam.merchantId = records.id;
      this.searchQuery()
      this.getCompanyList();
    },
    //获取所有公司列表
    async getCompanyList() {
      let res = await getAction('/hc/hcCompanyMerchantInfo/queryCompanyListByMerchantId', { pageSize: 999999, pageNo: 1, merchantId: this.queryParam.merchantId });
      console.log('this.tabList', this.tabList);
      this.tabList = [...this.tabList, ...res.result];
      console.log('this.tabList', this.tabList);
    },
    handOk() { this.visiable = false; },
    handCancel() { this.visiable = false; this.tabList = [{ companyName: '用户账户' }] },
    tabChange(e) {
      this.current = e;
      if (this.current === 0) {
        this.queryParam.companyId = null
        this.url.list = '/hc/hcMerchantSettlement/queryRecordListById'
      } else {
        this.queryParam.companyId = this.tabList[this.current].id
        this.url.list = '/hc/hcCompanyMerchantSettlement/queryRecordListByMerchantIdAndCompanyId'
      }
      this.loadData();
    }
  },
}
</script>

<style></style>